<template>
  <view class="container_qualificationsMail">
    <view style="height: 20.83rpx"></view>
    <view class="mailQualifications">
      <view>药店纸质资质邮寄资料</view>
      <view>已过期资质</view>
      <view>
        <text v-for="(item, index) in expiredQualification" :key="index">
          {{ index + 1 }}、 《{{ item }}》
        </text>
      </view>
      <view>*邮寄资料需要在有效期以内，均需加盖公章、鲜章。</view>
    </view>

    <view class="mailAddress">
      <image :src="staticUrl() + '/carts/line.png'" mode="scaleToFill"></image>
      <view class="item">
        <text>收件人:</text>
        <text>{{ expressAddress.name }}</text>
      </view>
      <view class="item">
        <text>电&emsp;话:</text>
        <text>{{ expressAddress.mobile }}</text>
      </view>
      <view class="item">
        <text>地&emsp;址:</text>
        <text>{{ expressAddress.addressPath + expressAddress.address }}</text>
      </view>
      <view class="tips"> *拒绝到付件，如寄到付，平台一律按照拒收处理。 </view>
    </view>
  </view>
</template>

<script>
import { getERPQualificationsStatus, shipToAddress } from '@/api/personalCenter/index.js'
import jwtDecode from 'jwt-decode'

export default {
  data () {
    return {
      expiredQualification: [],
      expressAddress: ''
    }
  },
  onLoad () {
    let a = JSON.parse(jwtDecode(uni.getStorageSync('token')).userContext.replace('\\', ''))
    this.purchaserId = a.purchaserId
    getERPQualificationsStatus(this.purchaserId).then(res => {
      if (res.code === 200) {
        res.data.forEach(i => {
          if (new Date(i.expireTime).getTime() < new Date().getTime()) {
            this.expiredQualification.push(i.classificationName)
          }
        })
      }
    })
    shipToAddress().then(res => {
      if (res.code === 200) {
        this.expressAddress = res.data
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.container_qualificationsMail {
  height: 100vh;
  background: #f9f9f9;
}

.mailQualifications {
  background: #fff;
  margin: 0 25rpx;

  view:nth-child(1) {
    font-size: 33rpx;
    padding-top: 44.44rpx;
    margin-left: 36.81rpx;
  }

  view:nth-child(2) {
    width: 168rpx;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    color: #ef231b;
    background: #ffe9e8;
    border-radius: 10rpx;
    text-align: center;
    margin-left: 36.81rpx;
    margin-top: 40.28rpx;
    margin-bottom: 30.56rpx;
  }

  view:nth-child(3) {
    font-size: 33rpx;
    font-size: 28rpx;
    color: #565656;
    margin-left: 36.81rpx;
  }

  view:nth-child(4) {
    font-size: 21rpx;
    color: #ef231b;
    margin-top: 52.78rpx;
    margin-left: 36.81rpx;
    padding-bottom: 47.92rpx;
  }
}

.mailAddress {
  background: #fff;
  margin: 0 25rpx;
  margin-top: 20.83rpx;
  padding: 0 0 48.61rpx 0;

  image {
    width: 100%;
    height: 4rpx;
    margin-top: 32.14rpx;
    margin-bottom: 75.69rpx;
  }

  .item {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    margin-left: 36.11rpx;
    margin-bottom: 54.86rpx;
    padding-right: 52.78rpx;
    font-size: 33rpx;

    text:nth-child(1) {
      width: 22%;
      color: #565656;
      margin-right: 15.97rpx;
    }

    text:nth-child(2) {
      display: inline-block;
      width: 93%;
      padding-bottom: 13.89rpx;
      padding-left: 38.89rpx;
      border-bottom: 1px solid #d0d0d0;
    }
  }

  .tips {
    height: 50rpx;
    line-height: 50rpx;
    border-radius: 10rpx;
    font-size: 21rpx;
    color: #565656;
    background: #f9f9f9;
    margin: 41.67rpx 36.11rpx 0;
    padding-left: 22.22rpx;
  }
}
</style>
